<template>
  <div id="CompanyManagement">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>企业信息管理</h2>
        </div>
      </el-col>
    </el-row>
    <div class="search-box">
      <el-form inline>
        <el-form-item label="公司姓名">
          <el-input v-model="searchCompanyForm.company_name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="searchCompanyForm.tel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch" icon="search">{{ $t('Search') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar-box">
      <el-button-group>
        <el-button type="primary" icon="edit" @click="openPreview({'id':currentId}, {})">编辑</el-button>
      </el-button-group>
    </div>
    <el-table :data="companyList" border highlight-current-row fit @row-dblclick="openPreview" @row-click="clickRow"
              @current-change="handleTableChange">
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="company_name" label="公司名称" align="center"></el-table-column>
      <el-table-column prop="contact_person" label="联系人" align="center"></el-table-column>
      <el-table-column prop="desk_phone" label="固定电话" align="center"></el-table-column>
      <el-table-column prop="industry_name" label="所属行业" align="center"></el-table-column>
    </el-table>

    <el-pagination v-if="total > 10" @current-change="handleCurrentChange" layout="total, prev, pager, next"
                   :total="total" class="table-page-style"></el-pagination>

    <el-dialog title="编辑企业用户" v-model="isDialog">
      <el-form :model="userInfoData" :rules="userInfoRules" ref="userInfoDataForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="account">
              <el-input v-model="userInfoData.company_name" size="small" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="password">
              <el-input v-model="userInfoData.contact_person" disable size="small" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="tel">
              <el-input v-model="userInfoData.tel" size="small" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="email">
              <el-input v-model="userInfoData.industry_name" size="small" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="memo">
          <el-input type="textarea" :autosize="{ minRows: 3}" v-model="userInfoData.company_publicity" size="small"
                    style="width:100%"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <el-button type="info" size="large" @click="checkUserInfoData()">保存</el-button>
        <el-button type="info" size="large" @click="cancelInfoEdit()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getToolBarList } from '../../assets/js/buildStructure/list.js'

  export default {
    name: 'CompanyManagement',
    data () {
      return {
        toolbarList: [],
        companyList: [],
        searchCompanyForm: {
          company_name: '',
          tel: ''
        },
        currentId: '',
        total: 0,
        userInfoData: {
          id: '',
          account: '',
          password: '',
          verify_tel: 0,
          verify_email: 0,
          password: '',
          status: 0,
          memo: ''
        },
        userInfoRules: {
          account: [
            {min: 0, max: 60, message: '长度在 1 到 60 个字符', trigger: 'change', required: true}
          ],

          password: [
            {min: 0, max: 30, message: '长度在 1 到 30 个字符', trigger: 'change', required: true}
          ],
          memo: [
            {min: 0, max: 120, message: '长度在 1 到 120 个字符', trigger: 'change', required: true}
          ]
        },
        isDialog: false,
        page_no: 0
      }
    },
    created () {
      this.getCompanyDataList({'page_no': 1})
    },
    methods: {
      openPreview (row, event) {
        this.currentId = row.id
        if (this.currentId === undefined || this.currentId == '') {
          this.$message.info('未选中数据!')
          return
        }
        this.isDialog = true
        this.getCompanyData()
      },
      clickRow (row, event, column) {
        this.currentId = row.id
      },
      handleTableChange (currentRow, oldCurrentRow) {
        this.currentId = currentRow.id
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      getCompanyDataList (parameter) {
        let _this = this
        parameter.page_size = 10
        postDataToServer('COMPANY_MANAGE_LISTPAGE', parameter).then((data) => {
          if (data.status === 0) {
            _this.companyList = data.data_list
            _this.total = data.total_results
          }
        })
      },
      doSearch () {
        let parameter = new Object()
        parameter.page_no = 1
        this.getCompanyDataList(parameter)
      },
      getCompanyData () {
        let _this = this
        let parameter = new Object()
        parameter.company_id = _this.currentId
        postDataToServer('HM_COMPANY_USER_GET', parameter).then((data) => {
          if (data.status === 0) {
            console.log(data)
            _this.userInfoData = data
          }
        })
      },
      checkUserInfoData () {
        let _this = this
        _this.$refs['userInfoDataForm'].validate((valid) => {
          if (valid) {
            _this.saveUserInfoData()
          } else {
            _this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })

          }
        })
      },
      saveUserInfoData () {
        let _this = this
        let parame = new Object()
        parame = _this.userInfoData
        postDataToServer('HM_COMPANY_USER_EDIT', parame).then((data) => {
          if (data.status === 0) {
            _this.isDialog = false
            for (let key in this.userInfoData) {
              this.userInfoData[key] = ''
            }
          } else {
            _this.$message.error(data.message)
          }
        })
      },
      cancelInfoEdit () {
        this.isDialog = false
        for (let key in this.userInfoData) {
          this.userInfoData[key] = ''
        }
      },
    },
    watch: {
      isDialog (val, oldVal) {
        if (val === true) {
          this.getCompanyData()
        } else if (oldVal === false) {
          this.getCompanyDataList({'page_no': 1})
        }
      },
      page_no (val, oldVal) {
        this.getCompanyDataList({'page_no': val})
      }
    }
  }
</script>
<style scoped>
  #CompanyManagement {
    margin: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-top: 20px;
  }

  .btn-box {
    text-align: center;
  }
</style>
